<template>
    <div class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
            <div class="col-sm-6">
                <slot name="batch"></slot>
            </div>
            <div class="col-sm-6">
                <div class="pull-right">
                    <label>搜索</label>
                    <input class="form-control input-sm" type="search" placeholder="输入关键词" v-model="filterKey">

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table class="table table-striped table-condensed" role="grid">
                    <thead>
                    <th><input type="checkbox" @click="checkAll" /></th>
                    <th># </th>
                    <th v-for="(key,title) in columns">{{title}}</th>
                    <th v-if="operation">操作</th>
                    </thead>
                    <tbody>

                    <tr v-for="item in datas | filterBy filterKey | limitBy perPageCount cur*perPageCount"
                        track-by="$index">
                        <td>
                            <input type="checkbox" value="{{item[key]}}" v-model="checkValues" />
                        </td>
                        <td>{{$index+1}}</td>
                        <td v-for="(key,title) in columns">
                            {{item[key]}}
                        </td>
                        <td v-if="operation" data-index="{{$index}}">
                            <slot name="operation"></slot>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-5">
                <div class="DataTables_length">
                    <label>每页显示</label>
                    <select class="form-control input-sm" v-model="perPageCount">
                        <option>5</option>
                        <option>10</option>
                        <option>20</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-7">
                <div class="paging_simple_numbers pull-right">
                    <ul class="pagination">
                        <li class="paginate_button previous" :class="{'disabled':cur==0}">
                            <a @click="paginate(cur-1<0?0:cur-1)">上一页</a>
                        </li>
                        <li :class="{'disabled':cur==0}">
                            <a @click="paginate(0)">第一页</a>
                        </li>
                        <li v-if="cur>2">
                            <a>...</a>
                        </li>
                        <li v-for="index in pages"
                            v-if="index<cur+range && index>cur-range"
                            :class="{'active':cur==index}">
                            <a @click="paginate(index)">{{index+1}}</a>
                        </li>
                        <li v-if="cur<pages-3">
                            <a>...</a>
                        </li>
                        <li :class="{'disabled':cur==pages-1}">
                            <a @click="paginate(pages-1)">最后一页</a>
                        </li>
                        <li class="paginate_button next" :class="{'disabled':cur==pages-1}">
                            <a @click="paginate(cur==pages-1?pages-1:cur+1)">下一页</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
</style>
<script>
    import Dropdown from './Dropdown.vue'
    export default{
        props: {
            datas: Array,
            columns: Object,
            operation: {
                type: Boolean,
                default: false
            },
            key:{
                type:String,
                default: "id"

            },
            checkValues:
            {
                type: Array,
                toWays:true,
                default:function(){
                    return []
                }
            },
            cur:{
                type:Number,
                default:0,
                twoWay:true
            },
            perPageCount: 10

        },
        components: {
            Dropdown
        },
        data() {
            return {


                filterKey: "",

            }
        },
        methods: {
            paginate: function (index) {
                console.log(index);
                //this.users.slice(this.perPageCount * index, this.perPageCount*(index+1));

                this.cur = index;
                this.checkValues=[];
            },
            sortBy: function (key) {
                this.sortKey = key
                this.sortOrders[key] = this.sortOrders[key] * -1
            },
            checkAll: function(){
//                this.checkValues=this.fullChcekValues;
//                console.log(this.fullCheckValues)
                if(this.checkValues.length===this.fullCheckValues.length){
                    this.checkValues=[]
                }
                else{
                    this.checkValues=this.fullCheckValues;
                }
            }
        },
        computed: {
            pages: function () {
                //this.users.slice(0, this.perPageCount);
//                console.log(this.cur)
//                console.log(this.perPageCount)

                return Math.ceil(this.datas.length / this.perPageCount);
            },
            fullCheckValues: function(){
                var values= [];
                var self=this;
                this.datas.slice(this.cur*this.perPageCount,this.perPageCount).forEach(function(item){
                    values.push(item[self.key].toString());
                });


                return values;
            },
            range: function () {
//                console.log(this.pages);
                if (this.cur - 3 < 0) {
                    return 5 - this.cur;
                }
                if (this.cur + 3 > this.pages) {
                    return 6 - this.pages + this.cur
                }
                return 3;
            }


        }
    }
</script>